<template>
	<view class="">
		<!-- 个人模块 -->
		<!-- 已登录 -->
		<button open-type='getUserInfo' @getuserinfo="getUser">获取微信 </button>
		<view class="person clearfix" v-if="isLogin" >
			<!-- <view v-if="userList.length == 0" @tap="$no_repeat(personal)">
				<image class="buddha" :src="`${url}/images/WD.png`" mode=""></image>
				<view class="text">
					<text class="name">一只快乐的小橙子</text>
					<text class="sign">手机号：请验证手机号</text>
				</view>
				<view class="details"><text class="istet">验证信息</text><image class="jt" :src="`${url}/images/my/GRQJ.png`" mode=""></image></view>
			</view> -->
			<view>
				<image class="buddha" :src="userList.avatarUrl" mode=""></image>
				<view class="text">
					<text class="name">{{ userList.nickName }}</text>
					<text class="sign">手机号：{{'8888888888888'}}</text>
				</view>
				<view class="details"><text class="istet">已验证</text><image class="jt" :src="`${url}/images/my/GRQJ.png`" mode=""></image></view>
			</view>
		</view>
		<!-- 未登录 -->
		<view class="person" v-else>
			<image class="buddha" :src="`${url}/images/wode.png`" mode=""></image>
			<view class="text login"><navigator class="getLogin">立即登录</navigator></view>
			<view class="details"><image class="jt" :src="`${url}/images/my/GRQJ.png`" mode=""></image></view>
		</view>
		<!-- 我的报名 -->
		<view class="apply" @tap="$no_repeat(apply)">
			<image class="img" :src="`${url}/images/my/BM.png`" mode=""></image>
			<text class="tet">我的报名</text>
		</view>
		<!-- 功能模块 -->
		<view class="Setting">
			<view class="apply nomar bor" @tap="$no_repeat(about_us)">
				<image class="img" :src="`${url}/images/my/GY.png`" mode=""></image>
				<text class="tet">关于我们</text>
			</view>
			<view class="apply nomar bor">
				<image class="img" :src="`${url}/images/my/KF.png`" mode=""></image>
				<text class="tet">联系客服</text>
			</view>
			<view class="apply nomar">
				<image class="img" :src="`${url}/images/my/TC.png`" mode=""></image>
				<text class="tet">退出</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			url: this.baseUrl,
			isLogin: true,
			userList: []
		};
	},
	onLoad() {
		let that = this;
		uni.login({
			provider: 'weixin',
			success: function(loginRes) {
				// loginRes 实际输出的是  {"errMsg":"login:ok","code":"0230gxqx1BgRRh0afIox1UAOqx10gxqF"}
				// 并不存在 authResult 属性。
				// 微信开发者工具此处提示 获取 wx.getUserInfo 接口后续将不再出现授权弹窗，请注意升级
				uni.getUserInfo({
					provider: 'weixin',
					withCredentials: true,
					success: function(infoRes) {
						console.log('用户昵称为：' + infoRes.userInfo.nickName);
						that.userList = infoRes.userInfo;
					},
					fail: function(res) {
						// 这里res = {"errMsg":"getUserInfo:fail scope unauthorized"}
						console.log('res=' + JSON.stringify(res));
					}
				});
			},
			fail: function(es) {
				console.log('fail');
				console.log(es);
			}
		});
	},
	methods: {
		getUser(info){
			console.log(info)
		},
		personal() {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		},
		apply() {
			uni.navigateTo({
				url: '/pages/my/apply'
			});
		},
		about_us() {
			uni.navigateTo({
				url: '/pages/my/about_us'
			});
		}
	}
};
</script>

<style>
.clearfix:after {
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
page {
	background-color: #f7f7f7;
}
.person {
	background-color: #fff;
	height: 150upx;
}
.buddha {
	float: left;
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
	margin: 32upx 20upx 0 50upx;
}
.text {
	float: left;
	line-height: 100upx;
	margin-left: 10upx;
	color: #0f0f0f;
}
.login {
	line-height: 150upx;
	/* color: #191919; */
}
.name {
	display: block;
	height: 44upx;
	font-weight: 600;
	font-size: 30upx;
}
.sign {
	font-size: 20upx;
	color: #717171;
}
.details {
	float: right;
	font-size: 60upx;
	line-height: 150upx;
	margin-right: 20upx;
	color: #8a8a8a;
	font-weight: 300;
}
.apply {
	margin: 10upx 0;
	height: 80upx;
	background-color: #fff;
}
.apply .img {
	float: left;
	width: 40upx;
	height: 40upx;
	margin: 20upx;
	margin-left: 40upx;
}
.apply .tet {
	line-height: 80upx;
	margin-left: 40upx;
	font-weight: 600;
	color: #1b1b1b;
	font-size: 28upx;
}
.nomar {
	margin: 0;
	position: relative;
}
.bor::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 120upx;
	height: 1px;
	content: '';
	background-color: #efefef;
}
.jt {
	width: 30upx;
	height: 30upx;
}
.istet{
	display: inline-block;
	font-size: 26upx;
	margin-right: 20upx;
	line-height: 20upx;
	color: #8CD4AF;
}
</style>
